<template>
  <div class="type">
    <div
      class="item"
      v-for="(item, index) in type"
      :key="index"
      :class="{ active: index === currentIndex }"
      @click="change(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      type: [
        "全部",
        "最新",
        "书籍",
        "电脑",
        "手机",
        "洗衣机",
        "袜子",
        "牙刷",
        "其他"
      ],
      currentIndex: 0
    };
  },
  methods: {
    change(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.type {
  display: flex;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  overflow-x: scroll;
  white-space: nowrap; 
  position: sticky;
  top: 42px;
}
.item {
  flex: 1;
  border-radius: 12px;
  padding: 5px 0 5px 0;
  text-align: center;
}
.active {
  background-color: brown;
  color: white;
}
</style>
